<template>
  <div class="container">
    <div class="right-box">
      <!-- <span>排列顺序: </span>
      <el-radio-group v-model="radio4" size="mini" style="margin-bottom: 10px">
        <el-radio-button label="工号"></el-radio-button>
        <el-radio-button label="姓名"></el-radio-button>
      </el-radio-group> -->
      <el-button
        type="primary"
        style="margin-bottom: 5px"
        size="small"
        @click="handleAdd()"
      >
        新增档案管理员
      </el-button>
      <el-table v-loading="isLoading" :data="authData" border>
        <el-table-column prop="username" align="center" label="用户名" />
        <el-table-column prop="realname" align="center" label="姓名" />
        <el-table-column prop="rootType" align="center" label="类型">
          <template slot-scope="scope">
            <span>{{ returnType(scope.row.rootType) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleReset(scope.row)"
            >重置密码</el-button>
            <el-button
              v-show="scope.row.rootType != 9"
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page.sync="page.pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="page.pageSize"
          layout="sizes, total, prev, pager, next"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog :title="title" :visible.sync="addDialog" width="40%">
      <div style="padding: 0 30px">
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="addRules"
          label-position="left"
          label-width="70px"
        >
          <el-form-item label="登录名" prop="username">
            <el-input v-model="addForm.username" clearable />
          </el-form-item>
          <el-form-item label="姓名" prop="realname">
            <el-input v-model="addForm.realname" clearable />
          </el-form-item>
          <el-form-item label="角色" prop="rootType">
            <el-select v-model="addForm.rootType" style="width: 100%">
              <el-option
                v-for="(item, index) in data"
                :key="index"
                :label="item.roleName"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>

          <!-- <el-form-item label="管理员类型">
            <el-radio v-model="addForm.rootType" label="0">普通档案管理员</el-radio>
            <el-radio v-model="addForm.rootType" label="9">root</el-radio>
          </el-form-item> -->
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  qryAllManager,
  addManager,
  resetPasswd,
  deleteManager
} from '@/api/user'
import { roleMenu } from '@/api/roleMenu'
export default {
  data() {
    return {
      isLoading: false,
      title: '',
      authData: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 10
      },
      addForm: {
        username: '',
        realname: '',
        rootType: ''
      },
      addRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        realname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        rootType: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]
      },
      addDialog: false,
      row: {},
      data: []
    }
  },
  created() {
    this.getData()
    this.getAllRoleList()
  },
  methods: {
    returnType(value) {
      if (this.data) {
        for (let i = 0; i < this.data.length; i++) {
          if (this.data[i].roleId === value) {
            return this.data[i].roleName
          }
        }
        return ''
      }
      return ''
    },
    // 获取角色列表
    getAllRoleList() {
      roleMenu().then((res) => {
        this.data = res.data
      })
    },
    // 获取列表数据
    getData() {
      this.isLoading = true
      const { pageNum, pageSize } = this.page
      const param = {
        pageNum: pageNum,
        pageSize: pageSize
      }
      qryAllManager(param)
        .then((res) => {
          if (res.code === '0') {
            this.authData = res.data.records
            this.page.total = parseInt(res.data.total)
          }
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    handleAdd(row) {
      this.title = '新增管理员'
      this.addDialog = true
    },
    handleReset(row) {
      this.$confirm('此操作将重置该用户密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetPasswd({ username: row.username, type: 1 })
          .then((res) => {
            if (res.code === '0') {
              this.$message({
                type: 'success',
                message: '重置成功!'
              })
            }
          })
          .finally(() => {
            this.getData()
          })
      })
    },
    submit() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          const param = { ...this.addForm }
          if (this.title === '新增管理员') {
            addManager(param).then((res) => {
              if (res.code === '0') {
                this.getData()
                this.addDialog = false
                this.addForm = {
                  username: '',
                  realname: '',
                  rootType: ''
                }
              }
            })
          }
        }
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteManager({ username: row.username, type: 1 })
          .then((res) => {
            if (res.code === '0') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getData()
            }
          })
          .finally(() => {
            this.getData()
          })
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getData()
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  padding: 20px;
}

.left-box {
  flex: 1;
  border-right: 1px solid #eee;
  height: calc(100vh - 100px);
}

.left-top {
  font-size: 18px;
  font-weight: bold;
}

.left-item {
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.right-box {
  /* margin-left: 10px; */
  flex: 15;
  width: 50%;
}

.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}
</style>
